<template>
  <div class="flex-c" style="width: 100%">
    <div class="cell">
      <input class="password-input" placeholder="请输入密码" v-model="firstVal"/>
      <div class="state" v-if="firstIsMatch" v-show="firstHasInputted">
        <span class="state-text green"></span><img :src="getIcon('true')" class="state-icon">
      </div>
      <div class="state" v-else v-show="firstHasInputted">
        <span class="state-text main-color">6-16位字母数字组合</span><img :src="getIcon('false')" class="state-icon">
      </div>
    </div>
    <div class="divider" style="width: 100%" :style="{height: dividerHeight}"></div>
    <div class="cell">
      <input class="password-input" placeholder="密码确认" v-model="secondVal"/>
      <div class="state" v-if="secondIsMatch" v-show="secondHasInputted">
        <span class="state-text green"></span><img :src="getIcon('true')" class="state-icon">
      </div>
      <div class="state" v-else v-show="secondHasInputted">
        <span class="state-text main-color">密码不一致</span><img :src="getIcon('false')" class="state-icon">
      </div>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
  import Public from '@/assets/js/public';
  import Props from '@/assets/js/Props';

  export default {
    /** kebab-case */
    name: 'cell-login-password',

    data() {
      return {
        firstVal: null,
        secondVal: null,
        firstIsMatch: false,
        firstHasInputted: false,
        secondIsMatch: false,
        secondHasInputted: false
      };
    },
    /** 在声明 prop 的时候，其命名应该始终使用 camelCase，而在模板和 JSX 中应该始终使用 kebab-case。
     String/Number/Boolean/Function/Object/Array/Symbol */
    props: {
      dividerHeight: {
        default: '1px',
        type: String
      }
    },

    components: {},

    methods: {
      getIcon(icon) {
        return Public.ossImg + icon + '.svg';
      },
      emit() {
        if (this.firstIsMatch && this.secondIsMatch) {
          this.$emit('getPassword', true, this.secondVal);
        } else {
          this.$emit('getPassword', false, null);
        }
      }
    },
    computed: {
    },
    watch: {
      firstVal() {
        this.firstHasInputted = true;
        this.firstIsMatch = new RegExp(Props.REGEX_LOGIN_PASSWORD).test(this.firstVal);
        this.secondIsMatch = this.secondVal === this.firstVal;
        this.emit();
      },
      secondVal() {
        this.secondHasInputted = true;
        this.secondIsMatch = this.secondVal === this.firstVal;
        this.emit();
      }
    }
  };
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
  @import "../../assets/stylus/main.styl";
  .flex-r
    flex-x()

  .flex-c
    flex-y()

  .center
    flex-center()

  .divider
    divider()

  .space
    space()

  .cell
    flex-x()
    height cell-height
    width 100%
    position relative

  .password-input
    width 100%
    height 100%
    text-align left
    word-big()
    padding-left 10px

  .state
    position absolute
    right 10px
    flex-center()
    justify-content flex-end
    width 45vw
    pointer-events none

  .state-text
    word-vw(12px, main-color)

  .state-icon
    margin-left 1vw
    width 4vw

  .main-color
    color main-color

  .green
    color #00aa00

  ::-webkit-input-placeholder
    word-vw(16px, third-ash)

  :-moz-placeholder
    word-vw(16px, third-ash)

  ::-moz-placeholder
    word-vw(16px, third-ash)

  :-ms-input-placeholder
    word-vw(16px, third-ash)

</style>
